<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片墙纯csss实现</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background: #f2f3f5;
            overflow: auto;
        }
        body {
            display: flex;
            flex-wrap: wrap;
            /*基于多少列实现照片墙布局，目前不能基于宽度实现自适应，需要容纳12列才能看到效果*/
            --n: 12;
            --w: 200px;
            clip-path: polygon(4% 0, 92% 0, 92% 100%, 4% 100%); 
        }
        .photo-item {
            width: var(--w);
            height: var(--w);
            clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            /* clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); */
        }
        /* nth-child详情的n不能基于css变量， 目前只能基于列动态变化 */
        .photo-item:nth-child(24n + 14){
            margin-left: calc(var(--w)/2);
        }
        .photo-item:nth-child(n + 14){
            margin-top: calc(var(--w)/2 * -1);;
        }
    </style>
</head>
<body>

</body>
<script>
    function randomColor() {
        return '#' + Math.random().toString(16).substr(-6);
    }

    let row = 1;
    let col = 1;
    for (let i = 0; i < 108; i++) {
        const div = document.createElement('div');
        div.className = 'photo-item ' + 'num' + (i+1);
        div.style.backgroundColor = randomColor();

        document.body.appendChild(div);
    }
</script>
</html>